<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>数据总览</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script src="/js/china.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/countUp.min.js"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        /*欢迎文字*/
        .layui-elem-quote:hover {
            background: #b9c8ff;
        }

        /*卡片样式*/
        .layui-card-body li:hover {
            background: #ffb5b7;
        }

        .layui-card-body li a:hover {
            background: #9cecff;
        }

        .layui-card-body li:hover h3 {
            font-size: 16px;
            color: #911215;
        }

        .layui-card-body li:hover cite {
            font-size: 30px;
            color: #3d933a;
        }

        /*系统信息*/
        .layui-table tbody tr th {
            width: 30%
        }

        .layui-table tbody tr:hover {
            background-color: #ddded9;
        }

        .layui-table tbody tr:hover th {
            font-size: 18px;
        }

        .layui-table tbody tr:hover td {
            font-size: 18px;
            /*letter-spacing: 3px;*/
        }
        /*开发团队*/
        .team tbody tr:hover {
            background-color: #d1d1ff;
        }

    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-md12" style="margin-top: 10px">
            <div class="layui-card">
                <div class="layui-card-header"
                     style="background-image: linear-gradient(#ffedcc , #ffffff);">
                    静坐当思己过，闲谈莫论人非。
                </div>
                <div class="layui-card-body" style="background-image: linear-gradient(#ffffff , #ffedcc);">
                    <blockquote class="layui-elem-quote layui-anim layui-anim-scale" style="font-size: 20px;background-color: rgba(255,230,179,0.89)">
                        当前时间：<span id="time" style="font-size: 20px;font-family: 方正姚体;"></span>
                    </blockquote>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header"
                     style="background-image: linear-gradient(#86e4df , #ffffff);">数据统计
                </div>
                <div class="layui-card-body" style="background-image: linear-gradient(#ffffff , #86e4df); min-height: 85px">
                    <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog">
                        <li class="layui-col-xs6 layui-col-sm3 layui-col-md3 ">
                            <a class="x-admin-backlog-body">
                                <h3>管理员人数</h3>
                                <p>
                                    <cite id="card0" class="counter">0</cite></p>
                            </a>
                        </li>
                        <li class="layui-col-xs6 layui-col-sm3 layui-col-md3 ">
                            <a class="x-admin-backlog-body">
                                <h3>用户人数</h3>
                                <p>
                                    <cite id="card1" class="counter">0</cite></p>
                            </a>
                        </li>
                        <li class="layui-col-xs6 layui-col-sm3 layui-col-md3 ">
                            <a class="x-admin-backlog-body">
                                <h3>用户总访问次数</h3>
                                <p>
                                    <cite id="card2" class="counter">0</cite></p>
                            </a>
                        </li>
                        <li class="layui-col-xs6 layui-col-sm3 layui-col-md3 ">
                            <a class="x-admin-backlog-body">
                                <h3>总设备数</h3>
                                <p>
                                    <cite id="card3" class="counter">0</cite></p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="layui-row layui-col-space10">
            <div class="layui-col-sm12 layui-col-lg6">
                <div class="layui-card">
                    <div class="layui-card-header"
                         style="background-image: linear-gradient( #98d9f3 , #ffffff);">设备地域分布
                    </div>
                    <div class="layui-card-body" style="min-height:470px;">
                        <div id="main1" class="layui-col-sm12" style="height:470px;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-lg6">
                <div class="layui-card">
                    <div class="layui-card-header" style="background-image: linear-gradient(#f4c5c1 , #ffffff);">设备数量比重</div>
                    <div class="layui-card-body" style="min-height: 470px;">
                        <div id="main2" class="layui-col-sm12" style="height: 470px;"></div>

                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header" style="background-image: linear-gradient(#daffdb , #ffffff);">近期单日新增用户变化</div>
                    <div class="layui-card-body" style="min-height: 270px;">
                        <div id="main3" class="layui-col-sm12" style="height: 270px;"></div>

                    </div>
                </div>
            </div>

        </div>

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header" style="background-image: linear-gradient(#ddded9 , #ffffff);">系统信息</div>
                <div class="layui-card-body" style="background-image: linear-gradient(#ffffff , #ddded9);">
                    <table class="layui-table">
                        <tbody>
                        <tr>
                            <th>系统版本</th>
                            <td>1.2.0内测版</td>
                        </tr>
                        <tr>
                            <th>服务器地址</th>
                            <td>graduation.zengjianqi.com</td>
                        </tr>
                        <tr>
                            <th>服务器环境</th>
                            <td>LAMP</td>
                        </tr>
                        <tr>
                            <th>运行环境</th>
                            <td>Linux/CentOS-7.3</td>
                        </tr>
                        <tr>
                            <th>Apache版本</th>
                            <td>2.4.41</td>
                        </tr>
                        <tr>
                            <th>MySQL版本</th>
                            <td>5.6.44</td>
                        </tr>
                        <tr>
                            <th>PHP版本</th>
                            <td>7.2</td>
                        </tr>
                        <tr>
                            <th>ThinkPHP版本</th>
                            <td>5.0</td>
                        </tr>
                        <tr>
                            <th>Layui版本</th>
                            <td>2.5.6</td>
                        </tr>
                        <tr>
                            <th>X-admin版本</th>
                            <td>2.2/Deepin modified version by ZJQ</td>
                        </tr>
                        <tr>
                            <th>ECharts版本</th>
                            <td>4.6.0</td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card" style="margin-bottom: 20px">
                <div class="layui-card-header" style="background-image: linear-gradient(#d1d1ff , #ffffff);">开发团队</div>
                <div class="layui-card-body" style="background-image: linear-gradient(#ffffff , #d1d1ff);">
                    <table class="layui-table team">
                        <tbody>
                        <tr>
                            <th>前端</th>
                            <td>曾健起</td>
                        </tr>
                        <tr>
                            <th>后端</th>
                            <td>曾健起</td>
                        </tr>
                        <tr>
                            <th>版权所有</th>
                            <td>
                                <a href="http://zengjianqi.com/" target="_blank" class="layui-icon"> © Copyright
                                    Reserved.zengjianqi.com &#xe617; &#xe618; zengjianqi163@163.com</a>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
<script type="text/javascript">
    //配置可视化数字增长的属性
    var options = {
        useEasing: true, 	 	// 使用缓和
        useGrouping: true,	// 使用分组(是否显示千位分隔符,一般为 true)
        separator: ',',		// 分隔器(千位分隔符,默认为',')
        decimal: '.',			// 十进制(小数点符号,默认为 '.')
        prefix: '',			// 字首(数字的前缀,根据需要可设为 $,¥,￥ 等)
        suffix: ''			// 后缀(数字的后缀 ,根据需要可设为 元,个,美元 等)
    };

    $.ajaxSettings.async = false;
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3 = echarts.init(document.getElementById('main3'));

    //当前时间
    updateTime();
    setInterval(updateTime, 1000);

    //初始化卡片数据
    updateCards();

    //初始化所有图表
    updateEcharts();

    //根据窗口的大小变动图表 --- 重点
    window.onresize = function () {
        echatsResize();
    };

    //获取当前详细时间
    function updateTime() {
        var date = new Date();
        this.year = date.getFullYear();
        this.month = date.getMonth() + 1;
        this.date = date.getDate();
        this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()];
        this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        var currentTime = this.year + "." + this.month + "." + this.date + "," + this.day + ", " + this.hour + ":" + this.minute + ":" + this.second;
        $("#time").html(currentTime);
    }

    //获取卡片展示数据
    function updateCards() {
        $.get("/index/Tools/cardData", function (result) {
            //控制数字的滚动时间，数值越大，滚动时间越长。
            if (result[0] < 10) {
                var time0 = 1
            }else if (result[0] < 100) {
                var time0 = 2
            }else if (result[0] < 1000) {
                var time0 = 3
            }else {
                var time0 = 4
            }
            if (result[1] < 10) {
                var time1 = 1
            }else if (result[0] < 100) {
                var time1 = 2
            }else if (result[0] < 1000) {
                var time1 = 3
            }else {
                var time1 = 4
            }
            if (result[2] < 10) {
                var time2 = 1
            }else if (result[0] < 100) {
                var time2 = 2
            }else if (result[0] < 1000) {
                var time2 = 3
            }else {
                var time2 = 4
            }
            if (result[3] < 10) {
                var time3 = 1
            }else if (result[0] < 100) {
                var time3 = 2
            }else if (result[0] < 1000) {
                var time3 = 3
            }else {
                var time3 = 4
            }
            //下面的操作为数字可视化滚动显示至当前值
            $(function () {
                // CountUp(参数一, 参数二, 参数三, 参数四, 参数五, 参数六)
                // 参数一: 数字所在容器
                // 参数二: 数字开始增长前的默认值(起始值),一般从 0 开始增长
                // 参数三: 数字增长后的最终值,该值一般通过异步请求获取
                // 参数四: 数字小数点后保留的位数
                // 参数五: 数字增长特效的时间,此处为3秒
                // 参数六: 其他配置项
                // 注: 参数六也可不加,其配置项则为默认值
                new CountUp("card0", 0, result[0], 0, time0, {suffix: '人'}).start();
                new CountUp("card1", 0, result[1], 0, time1, {suffix: '人'}).start();
                new CountUp("card2", 0, result[2], 0, time2, {suffix: '次'}).start();
                new CountUp("card3", 0, result[3], 0, time3, {suffix: '个'}).start();

            });
            // card1.countUp({
            //     delay: 50,
            //     time: 2000
            // });
        });
    }

    //获取图表所需数据
    function updateEcharts() {
        // 指定图表1的配置项和数据
        $.get("/index/Tools/areaData", function (result) {
            // myChart1.showLoading();
            // setTimeout(function () {
            //     myChart1.hideLoading();
            // }, 200);
            myChart1.setOption(option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c} (个)'
                },
                grid: {
                    top: '1%',
                    right: '2%',
                    left: '1%',
                    bottom: '10%',
                    containLabel: true
                },
                toolbox: {
                    // show: true,
                    // orient: 'vertical',
                    // left: 'right',
                    // top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                visualMap: {
                    min: 0,
                    max: result[1],
                    text: ['High', 'Low'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                series: [
                    {
                        name: '设备地域分布',
                        type: 'map',
                        mapType: 'china', // 自定义扩展图表类型
                        itemStyle: {
                            normal: {label: {show: true}},
                            emphasis: {label: {show: true}}
                        },
                        data: JSON.parse(result[0]),
                    }
                ]
            });
        });

        // 指定图表2的配置项和数据
        $.get("/index/Tools/devTypeData", function (result) {
            // console.log(result[0]);
            // myChart2.showLoading();
            // setTimeout(function () {
            //     myChart2.hideLoading();
            // }, 400);
            myChart2.setOption(option = {

                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                toolbox: {
                    // show: true,
                    // orient: 'vertical',
                    // left: 'right',
                    // top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: result[0]
                },
                series: [
                    {
                        name: '设备类型',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: JSON.parse(result[1]),
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        });

        // 指定图表3的配置项和数据
        $.get("/index/Tools/userData", function (result) {
            // myChart3.showLoading();
            // setTimeout(function () {
            //     myChart3.hideLoading();
            // }, 300);
            myChart3.setOption(option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            color: '#9bbbde',
                            width: 3
                        }
                    }
                },
                color: '#85d081',
                toolbox: {
                    // show: true,
                    // orient: 'vertical',
                    // left: 'right',
                    // top: 'top',
                    feature: {
                        dataView: {readOnly: false},
                        saveAsImage: {}
                    }
                },
                grid: {
                    top: '15%',
                    right: '2%',
                    left: '1%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        // data: recentWeeks()
                        data: result[0]
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        minInterval: 1
                    }
                ],
                series: [
                    {
                        name: '新增人数：',
                        type: 'line',
                        areaStyle: {normal: {}},
                        data: result[1],
                        smooth: true
                    }]

            });
        });
    }

    //变动图表大小 --- 重点
    function echatsResize() {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
    }

    function recentWeeks() {
        var myDate = new Date();
        var days = myDate.getDay();
        var daysArr = [];
        for (var i = 0; i < 7; i++) {
            if (days < 0) {
                days = 6
            }
            daysArr.unshift(days);
            days--;
        }
        // console.log(daysArr);
        for (var i = 0; i < 7; i++) {
            daysArr[i] = trans(daysArr[i]);
        }

        console.log(daysArr);

        function trans(days) {
            switch (days) {
                case 1:
                    days = '周一';
                    break;
                case 2:
                    days = '周二';
                    break;
                case 3:
                    days = '周三';
                    break;
                case 4:
                    days = '周四';
                    break;
                case 5:
                    days = '周五';
                    break;
                case 6:
                    days = '周六';
                    break;
                case 0:
                    days = '周日';
                    break;
            }
            return days;
        }

        return daysArr;
    }
</script>
</body>
</html>